<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
          <el-button class="button" type="text" @click="add">新增</el-button>
        </div>
      </template>
      <vxe-table
        border
        stripe
        resizable
        highlight-hover-row
        height="800"
        :loading="info.loading"
        :checkbox-config="{ labelField: 'id', highlight: true, range: true }"
        :data="info.tableData"
        :emptyText="' '"
      >
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column field="id" title="ID" width="60"></vxe-column>
        <vxe-column field="username" title="用户名" sortable></vxe-column>
        <vxe-column field="name" title="姓名" sortable></vxe-column>
        <vxe-column field="create_time" title="创建时间" sortable></vxe-column>
        <vxe-column field="update_time" title="更新时间" sortable></vxe-column>
        <vxe-column title="编辑" width="140">
          <template #default="{ row }">
            <el-button type="text" @click="editEvent(row)">
              <el-icon class="el-icon--right"><Edit /></el-icon>编辑
            </el-button>
            <el-button type="text" @click="removeEvent(row)">
              <el-icon class="el-icon--right"><Delete /></el-icon>删除
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
        v-model:currentPage="page"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <user-form ref="addForm" @refresh="init"></user-form>

    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span
        >确定删除{{
          removeItem && removeItem.name ? removeItem.name : ''
        }}？</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="remove">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { VxeColumnPropTypes } from 'vxe-table';
import { Share, Delete, Search, Upload, Edit } from '@element-plus/icons';
import { IResponsePage, ISysUser } from '/@/api/interface';
import { userPage, deleteUser } from '/@/api/sys/user';
import userForm from './form.vue';

const info = reactive({
  loading: false,
  tableData: [] as ISysUser[],
  total: 0
});
const addForm = ref();
const page = ref(1);
onMounted(() => {
  init();
});

const init = async () => {
  page.value = 1;
  await getList();
};

const getList = async () => {
  info.loading = true;
  const res = await userPage<IResponsePage<ISysUser>>({ page: page.value });
  info.loading = false;
  info.tableData = res.data.rows;
  info.total = res.data.pagination.total;
};

const add = () => {
  console.log(addForm.value);
  addForm.value.display('add');
  // dialogVisible.value = true;
};

const editEvent = (row: ISysUser) => {
  console.log(row);
  addForm.value.display('edit', row);
};

const dialogVisible = ref(false);
const removeItem = ref<ISysUser>();

const removeEvent = (row: ISysUser) => {
  removeItem.value = row;
  dialogVisible.value = true;
};

const remove = async () => {
  await deleteUser(removeItem.value);
  dialogVisible.value = false;
  init();
  // console.log(removeItem);
};

const handleSizeChange = () => {};

const handleCurrentChange = (current: number) => {
  page.value = current;
  getList();
  // console.log(page);
};
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin: 20px;
  /* box-sizing: border-box; */

  /* width: 98%; */
}
</style>
